<script setup>

import {MoonNight, Sunny} from "@element-plus/icons-vue";
import {useDark, useToggle} from "@vueuse/core";
const isDark = useDark()
const toggleDark =()=> useToggle(isDark)
const chageTheme = (val) => {
  if (!val) {
    document.documentElement.setAttribute('theme', 'light')
    document.querySelector("html")?.classList.remove("dark")
    document.querySelector("html")?.classList.add("light")
  } else {
    document.documentElement.setAttribute('theme', 'dark')
    document.querySelector("html")?.classList.remove("light")
    document.querySelector("html")?.classList.add("dark")
  }
}
</script>

<template>
  <el-switch v-model="isDark" inline-prompt
             :active-icon="MoonNight"
             :inactive-icon="Sunny"
             active-color="var(--el-fill-color-dark)"
             inactive-color="var(--el-color-primary)"
             @change="toggleDark;chageTheme(isDark)" size="large" />

  <el-button size="large">切换</el-button>
    <div class="common-layout">
      <el-container>
        <el-header><el-image :src="Sunny"></el-image></el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </div>


</template>

<style scoped>

</style>